<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双指旋转</title>
<style>
  #rotatable {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    transition: transform 0.2s ease;
  }
</style>
</head>
<body>

<div id="rotatable"></div>

<script>
const rotatable = document.getElementById('rotatable');
let initialAngle = 0;

// 计算两点之间的角度
function getAngle(touches) {
  const angle = Math.atan2(touches[0].clientY - touches[1].clientY, touches[0].clientX - touches[1].clientX);
  return angle * (180 / Math.PI);
}

// 触摸事件处理函数
function handleTouch(e) {
  // 阻止默认行为
  e.preventDefault();
  const touches = e.touches;
    console.log(touches);
    console.log(touches.length);
  if (touches.length === 2) {
    
    if (e.type === 'touchstart') {
      initialAngle = getAngle(touches);
    } else if (e.type === 'touchmove') {
      const currentAngle = getAngle(touches);
      const rotateAngle = currentAngle - initialAngle;
      rotatable.style.transform = `rotate(${rotateAngle}deg)`;
    }
  }
}

// 添加触摸事件监听器
rotatable.addEventListener('touchstart', handleTouch, { capture: true, passive: false, once: true });
rotatable.addEventListener('touchmove', handleTouch, { capture: true, passive: false, once: true });

</script>

</body>
</html>
